<template>
	<view class="info_bg">
		  <image class="bgimg" src="/static/image/Index/1.png" mode="aspectFill"></image>
	  	<image @click="$helper.back(1)" class="back-img" src="/static/image/back.png" mode=""></image>
			
		<!-- 底部订阅弹框 -->
	<uni-popup ref="selectPopup" :mask-click="true" type="bottom">
		<view class="pyq-box">
			<view class="pyq-box-top">
				<view class=""></view>
				<view class="">订阅须知</view>
				<image @click="$refs.selectPopup.close('bottom')" src="/static/image/activity/cancle.png" mode="">
				</image>
			</view>
			<view class="dingTxt" style="margin-top:38rpx;">1.订阅后，您可以查看空间内相关内容；</view>
			<view class="dingTxt">2.本空间由空间达人自行创建，订阅空间前请确认相关风险，本平台不提供相关保证，请避免上当受骗；</view>
			<view class="dingTxt">3.虚拟商品一经售出不予退款，请确认阅读上述条款并无异议后进行订阅；</view>
			<view class="dingTxt">4.本平台不提供违法及色情内容，如您发现空间内存在以上内容，请联系人工客服举报处理。</view>

		</view>
	</uni-popup>
	
	<!-- dingyue弹框 -->
	<uni-popup class="select_popup" ref="popupVipWxNum" :mask-click="true" type="center">
		<view class="wxNumVipPopup">
				<view class="seeWX">订阅空间</view>
				<view class="wxVipNumtxt">
				即将消耗 <image src="/static/image/Index/index-jifen.png" mode=""></image> 686个订阅该空间，订阅后可永久享受空间
				权益与福利。
				</view>
				<view class="book_btn">
						<view class="bookclose" @click="closeVipWxNum">取消</view>
						<view class="booksubBuy" @click="rechargeChong">确认</view>
				</view>
		</view>
	</uni-popup>
	
	<!-- 充值弹框 -->
	<uni-popup class="select_popup" ref="popupChongWxNum" :mask-click="true" type="center">
		<view class="wxNumVipPopup">
				<view class="seeWX">余额不足</view>
				<view class="wxVipNumtxt">
				您的余额不足，无法订阅空间，请充值。
				</view>
				<view class="book_btn">
						<view class="bookclose" @click="closeChongWxNum">取消</view>
						<view class="booksubBuy" @click="rechargePoint">充值</view>
				</view>
		</view>
	</uni-popup>
			
			
			<view class="activing">
				<image :src="spaceInfo.image" mode="" class="active_img"></image>
				<image src="/static/image/Index/index-zaixian.png" mode="" class="activezx"></image>
			</view>
			<view class="info-content">				
			  <view class="info-msg">
						<view class="spaceDong">
							  <view style="font-size: 40rpx;">{{spaceInfo.space_dynamic_num}}</view>
								<view  style="font-size: 28rpx;color:#666">动态</view>
						</view>
						<view class="spaceZnum">							
							<view  style="font-size: 40rpx;">{{spaceInfo.like}}</view>
								<view  style="font-size: 28rpx;color:#666">获赞</view>
						</view>
				</view>
				<view class="spaceName">
						<view class="name-name">{{spaceInfo.name}}</view>
						<view class="name-tab"  @click="openDaren">达人</view>
						<image src="/static/image/Index/VIP-icon.png" mode="" @click="openVip" class="name-vip"></image>
						<image src="/static/image/Index/index-filter-left.png" mode="" class="name-left"></image>			
				</view>
				<view class="spaceCreate">
				  	<image src="/static/image/Index/girl-icon.png" mode="" class="name-sex"></image>
						<view class="name-time">创建于2025-05-13</view>
						<view class="name-time time-right" @click="$refs.selectPopup.open('bottom')">空间权益与福利</view>
						<image src="/static/image/Index/index-space-warn.png" mode="" class="name-warnicon"></image>
				</view>
				<view class="spacejianjie">
					<view class="space-jianjie">{{spaceInfo.introduction}}</view>
						<view class="space-jianjie">啥大口径粉红色点哈刷空间的化速度快</view>
				</view>
				
				<view class="point-list"   v-if="isJiesuo==false">
					<view class="te_list">
							<image src="/static/image/Index/index-space-qinmi.png" mode="" class="te-icon"></image>
							<view>
									<view class="te_name">亲密交流</view>
									<view class="te_ms">随时与达人亲密交流</view>
							</view>
					</view>				  
					<view class="te_list">
							<image src="/static/image/Index/index-space-sisuo.png" mode="" class="te-icon"></image>
							<view >
									<view class="te_name">私密动态</view>
									<view class="te_ms">掌握达人更加私密动态</view>
							</view>
					</view>
				</view>
			<!-- 隔断 -->
			<view class="info-bd"></view>
			
			<view class="infocontent_List" v-if="isJiesuo==false">
				<view class="commFilter" >
					<view class="filterTxt">最新更新</view>
					<image src="/static/image/Index/index-filter-left.png" class="leftFilter" mode=""></image>
				</view>
				<view class="info-photolist">
					<view class="photo-heng">
						<image v-for="(item,index) in photoList.slice(0,3)" class="heng-img" :key="index" :src="item" mode="aspectFill"></image>
					</view>		
				</view>	
			</view>
			<view class="index-tabs">
				<view class='active' v-for="(item,index) in tabList" :key="index">
					<view :class="{texted:currentTab == index }" :data-tab="item.value" @click="switchTab(index)">
						{{item.name}}
					</view>
				</view>
			</view>
			
			
			<view class="box-content" v-if="isJiesuo==true">
			<view class="type-box">
				<!-- <noData style="margin: 0 auto;" v-if="lists.length < 1" :ndText="'暂无达人数据'"></noData> -->
				<view class="content_model" v-for="(item,index) in 3" :key="index"
					@click="$helper.to('/pages/views/findDetail/findDetail?id=1' + '&type=1')">
					<image src="/static/image/Index/1.png" mode="" class="model_img"></image>
					<!-- <image v-show="item.type == 'video'" class="model_time" src="/static/image/find/play.png" mode=""></image> -->
					<view class="model_bz">
					撒大声地
					</view>
					<view class="model_info">
						<view class="model_info-left">
							<image src="/static/image/logo.jpg" mode="" class="vipimg"></image>
							<view class="info_name">阿斯蒂芬</view>
						</view>
						<view class="model_info-right">
							<image class="love-img" src="/static/image/find/love_active.png" mode=""></image>
							<!-- <image :src="item.love == '1' ? '/static/image/find/love.png' : '/static/image/find/love_active.png'" mode=""></image> -->
							<view class="">20</view>
						</view>
					</view>
				</view>
			</view>
				</view>
			
			<!-- 隔断 -->
			<view class="info-ged"></view>
			<view class="space-foot" v-if="isJiesuo==false">
					<view class="foot-xsx">
						<image src="/static/image/Index/index-jifen.png" mode="" class="foot-icon"></image>
						<view style="font-size: 32rpx;margin-left:12rpx;">{{spaceInfo.score}}</view>
						<view style="font-size: 24rpx;margin-left:12rpx;">永久有效</view>
						<view  class="jifenyue">
							我的余额:
							<view style="font-size: 24rpx;color:#000;margin:0 8rpx;display: flex; align-items: center;">{{pointInfo.total_score}} 
							 <image src="/static/image/Index/index-jifen.png" mode="" ></image> 		 
							 </view> >	
					 </view>
					</view>	
					<view class="footer-btn" @click="popupDing">立即订阅</view>
			</view>
			
			<!-- 按钮 -->
			<view class="info-btn" v-if="isJiesuo==true">
				<view class="join-btn" @click="joinSpace">加微信</view>
				<view class="luwi-btn"  @click="dsGift">
					 私聊
				</view>
			</view>
			
			
					
			</view>
	</view>
		
</template>

<script>
	import uniPopup from "@/components/uniapp-components/uni-popup/uni-popup.vue"
	export default {
		components: {
			uniPopup,
		},
		data() {
			return {
				currentTab: 0,
				tabList: [{
						name: '最新',
						value: 0
					},
					{
						name: '付费贴',
						value: 1
					},
					{
						name: '图片',
						value: 2
					},
					{
						name: '视频',
						value: 3
					},
				],
				photoList: [
					'/static/image/Index/1.png',
					'/static/image/Index/1.png',
					'/static/image/Index/1.png',
					'/static/image/Index/1.png',
					'/static/image/Index/1.png',
					'/static/image/Index/1.png',
				],
				userId:[],
				spaceInfo:{},
				pointInfo:{},
				isJiesuo:true,
			}
		},
		onLoad(options) {
			this.userId = options.userid	
			
			// this.$http.getSpaceDetail({id:this.userId}).then(res => {
			// 		if (res.code == '1') {
			// 			this.spaceInfo = res.data;							
			// 		}else{
			// 			uni.showModal({
			// 				title: '提示',
			// 				content: res.msg,
			// 				confirmColor: "#000000",
			// 				cancelColor: "#999999",
			// 				success: (res) => {
			// 					if (res.confirm) {
			// 						this.$helper.back(1)
			// 					}
			// 					if(res.cancel){
			// 						this.$helper.back(1)
			// 					}
			// 				}
			// 			})
			// 		}		
			// 	})
				
		this.getPoint()		
		},
		methods: {
		//获取积分
		getPoint(){
			this.$http.getPointDetail({}).then(res => {
				if (res.code == '1') {
					this.pointInfo= res.data
					
				}		
			})
		},
		switchTab(index) {
			this.currentTab = index;
		},
			//vip
			openVip(){
				this.$helper.to('/pages/views/openVip/openVip')
			},
			//dingyue
			popupDing(){
					this.$refs.popupVipWxNum.open() 
			},
			//关闭
			closeVipWxNum(){
			  this.$refs.popupVipWxNum.close()
			},
			rechargeChong(){
				 this.$refs.popupVipWxNum.close()
				 this.$refs.popupChongWxNum.open()
			},
			rechargePoint(){
			  	this.$refs.popupChongWxNum.close()
					this.$helper.to('/pages/tabBar/index/rechargePoint')				
			},
			openDaren(){
					this.$helper.to('/pages/views/management/management')		
			},
		
		}
	}
</script>

<style lang="scss" scoped>
	
	.index-tabs {
		display: flex;
		align-items: center;
		margin-top: 40rpx;
		margin-left:30rpx;
	}
	
	.active {
		font-size: 28rpx;
		margin-right: 40rpx;
		color:#999;
	}
	
	.texted {
		font-size: 32rpx;
		color:#000;
	}
	.info-btn {
		width: 100%;
		background: #f8f8f8;
		display: flex;
		align-items: center;
		padding: 64rpx 0;
	}
	
	.join-btn {
		width: 333rpx;
		height: 90rpx;
		line-height: 90rpx;
		color: #FEC92F;
		text-align: center;
		font-size: 32rpx;
		background: #000;
		border-radius: 12rpx;
		margin-left: 30rpx;
	}
	
	.luwi-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 333rpx;
		height: 90rpx;
		color: #fff;
		font-size: 32rpx;
		background: #FF4989;
		border-radius: 12rpx;
		margin-left: 30rpx;
	
		image {
			width: 30rpx;
			height: 35rpx;
			margin-right: 12rpx;
		}
	}
	
	
	.box-content{
		padding: 30rpx;
	}
	.type-box {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;		
	}
	
	.content_model {
		position: relative;
		height: 420rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}
	
	.model_img {
		width: 324rpx;
		height: 420rpx;
		border-top-right-radius: 16rpx;
		border-bottom-left-radius: 16rpx;
	}
	
	.model_time {
		position: absolute;
		width: 36rpx;
		height: 36rpx;
		right: 20rpx;
		top: 20rpx;
		border-radius: 50%;
	}
	
	.model_bz {
		position: absolute;
		bottom: 70rpx;
		left: 16rpx;
		font-size: 30rpx;
		color: #FFFFFF;
		width: 296rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.model_info {
		width: 90%;
		display: flex;
		position: absolute;
		bottom: 10rpx;
		left: 12rpx;
		font-weight: 500;
		justify-content: space-between;
	
		.model_info-left {
			display: flex;
			align-items: center;
	
			.info_name {
				width: 96rpx;
				font-size: 20rpx;
				color: #fff;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
	
			.vipimg {
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
				margin-right: 8rpx;
			}
		}
	
		.model_info-right {
			display: flex;
			font-weight: 400;
			font-size: 24rpx;
			color: #FFFFFF;
			align-items: center;
	
			.love-img {
				width: 24rpx;
				height: 22rpx;
				margin-right: 10rpx;
			}
		}
	}
	
	
	.pyq-box {
		width: 100%;
		height: 428rpx;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		padding: 20rpx;
	
		.pyq-box-top {
			display: flex;
			justify-content: space-between;
			font-weight: 500;
			font-size: 36rpx;
			color: #000000;
	
			image {
				width: 36rpx;
				height: 36rpx;
			}
		}
		.dingTxt{
			font-size: 26rpx;
			color:#000;
			margin:0 50rpx;
			line-height:38rpx;
		}
	}
	
	.select_popup {
		z-index: 9999;
		width: 100%;
		// 订阅金币弹框
		.wxNumVipPopup{
			background-color: #fff;
			width:600rpx;
			height: 352rpx;
			border-radius:30rpx;
			.seeWX{
				font-size: 32rpx;
				color:#000;
				text-align: center;
				padding-top:40rpx;
			}
			.wxVipNumtxt{
				width:482rpx;
				height:124rpx;
				font-size: 28rpx;
				text-align: center;
				color:#666;
				margin:0 auto;
				margin-top:48rpx;
				image{
					width:28rpx;
					height:28rpx;
				}
			}
			
			.book_btn{
				display: flex;
				align-items: center;
				height:96rpx;
				border-top:1px solid #f8f8f8;
				.bookclose{
					width:300rpx;
					height: 96rpx;
					line-height: 96rpx;
					font-size: 32rpx;
					color:#999;
					text-align: center;
					border-right:1px solid #f8f8f8;
				}
				.booksubBuy{
					display: flex;
					align-items: center;
					justify-content: center;
					width:299rpx;
					height: 96rpx;
					color:#000;
					line-height: 96rpx;
					text-align: center;
					font-size: 32rpx;
					image{
						width:28rpx;
						height:28rpx;
					}
				}
			}
		}
		


		
		
		
		}
	
	.info_bg {
		width: 100%;
		height: 100vh;
		position: relative;
		overflow: hidden;
	}
	.jifenyue{
		 font-size: 24rpx;
		 color:#999;
		 margin-left:18rpx;
		 display: flex;
		 align-items: center;
		 image{
			 width:22rpx;
			 height:22rpx;
			 margin-left:8rpx;
		 }
	}
	.bgimg{
		width: 100%;
		height: 100vh;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		filter: blur(6rpx);
		/* 调整模糊程度 */
		z-index: -1;
	}
	
	
	.back-img {
		width: 18rpx;
		height: 32rpx;
		position: absolute;
		top: 50rpx;
		left: 30rpx;
		z-index: 9999;
	
		image {
			width: 100%;
			height: 100%;
		}
	}
	.info-content {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 80%;
		background: #fff;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		overflow-y: auto;
		.info-msg {
			position: fixed;
			display: flex;	
			width:688rpx;
			margin:0 30rpx;
			padding-top:24rpx;
			height:120rpx;
			background: #fff;
			z-index:100;
		}	
		.spaceDong{
			margin-left:278rpx;
		}
		.spaceZnum{
			margin-left:130rpx;
		}
		
	}
	.spaceName{
	  margin:0 30rpx;
		margin-top:140rpx;

		display: flex;
		align-items: center;
		margin-bottom:16rpx;
	}
	.spaceCreate{
		margin:0 30rpx;
		display: flex;
		align-items: center;
		margin-bottom:16rpx;
	}
	.name-name{
		font-size: 40rpx;
		font-weight: bold;
		width:220rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.name-tab{
		width: 68rpx;
		height: 32rpx;
		background: #000000;
		border-radius: 90rpx;
		font-size: 20rpx;
		color:#fff;
		line-height: 32rpx;
		text-align: center;
	}
	.name-vip{
		width:54rpx;
		height:28rpx;
		margin-left:12rpx;
	}
	.name-left{
		width:12rpx;
		height:22rpx;
		margin-left:30rpx;
	}
	.name-sex{
		width:15.6rpx;
		height:23.5rpx;
	}
	.name-time{
		font-size: 24rpx;
		color: #666666;
		margin-left:12rpx;
	}
	.time-right{
		margin-left:250rpx;
	}
	.name-warnicon{
		width:24rpx;
		height:24rpx;
		margin-left:12rpx;
	}
	.spacejianjie{
		margin:12rpx 30rpx;
	}
	.space-jianjie{
		font-size: 28rpx;
		color: #000000;
	
	}
	.point-list{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-top:30rpx;
	}
.te_list{
		display: flex;
		align-items: center;
		width:330rpx;
		height:80rpx;
		margin-left:30rpx;
		margin-bottom:30rpx;
	}
	.te-icon{
		width:80rpx;
		height:80rpx;
		border-radius:50%;
		margin-right:16rpx;
	}
	.te_name{
		font-size: 28rpx;
		color:#000;
	}
	.te_ms{
		font-size: 24rpx;
		margin-top:8rpx;
		color:#999;
		width:220rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.infocontent_List {
		margin: 0 30rpx;
	}
	
	.commFilter {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 30rpx;
	}
	
	.filterTxt {
		display: flex;
		align-items: center;
		font-size: 30rpx;
		font-weight: bold;
		color: #000;
	}
	
	.leftFilter {
		width: 12rpx;
		height: 22rpx;
	}
	
	.info-photolist {
		display: flex;
		margin-top: 24rpx;
	}
	
	.photo-heng {
		display: flex;
		align-items: center;
	

	}
	.heng-img {
		width: 219rpx;
		height: 316rpx;
		border-radius: 12rpx;
		margin-right: 16rpx;
		filter: blur(8rpx);
	}
	
	
	.activing {
		position: relative;
		margin-right: 24rpx;
		width: 180rpx;
		height: 180rpx;
		top:188rpx;
		left:40rpx;
	}
	
	.active_img {
		position: absolute;
		width: 180rpx;
		height: 180rpx;
		border-radius: 50%;
		border:10rpx solid #fff;
		z-index: 999;
	}
	
	.activezx {
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		position: absolute;
		bottom: 0;
		right: 0;
	  z-index: 999;
	}
	.info-bd {
		width: 100%;
		height: 20rpx;
		background: #f8f8f8;
	}
	.info-ged{
		width: 100%;
		height: 240rpx;
		background: #f8f8f8;
		margin-top:30rpx;
	}
	.space-foot{
		height:98rpx;
		width:100%;
		background:#fff;
		position: fixed;
		bottom:0;
		left:0;
		display: flex;
		align-items: center;
	}
	.foot-xsx{
		margin-left:30rpx;
		display: flex;
	}
	.foot-icon{
		width:28rpx;
		height:28rpx;
	}
	.footer-btn{
		width:248rpx;
		height:80rpx;
		background: #000;
		border-radius: 12rpx;
		font-size: 30rpx;
		color: #FEC92F;
		line-height: 80rpx;
		text-align: center;
		margin-left:48rpx;
	}
	
</style>